// html 使用
// binding.arg 传参
// x x轴相对当前位置偏移量
// y y轴相对当前位置偏移量
{
  /* <img src="" v-drag:[initDrag]="dragHandle" alt="" />
const initDrag = reactive({ x: 0, y: 0 }) */
}
export const initVDrag = (Vue) => {
  Vue.directive("drag", {
    mounted(el, binding) {
      const oDiv = el // 当前元素
      const minTop = oDiv.getAttribute("drag-min-top")
      const ifMoveSizeArea = 20
      const { x = '50%', y = '50%' } = binding.arg || { }
      const initOffsetLeft = el.offsetLeft || 0
      const initoffsetTop = el.offsetTop || 0
      initOffset(el, binding, x, y, initOffsetLeft, initoffsetTop)
      // 初始化 x y 偏移量 数据
      oDiv.onmousedown = (e) => {
          let target = oDiv
          while (
            window.getComputedStyle(target).position !== "absolute" &&
            target !== document.body
          ) {
            target = target.parentElement
          }

          document.onselectstart = () => {
            return false
          }
          // if (!target.getAttribute("init_x")) {
          //   target.setAttribute("init_x", target.offsetLeft)
          //   target.setAttribute("init_y", target.offsetTop)
          // }

          // const initX = parseInt(target.getAttribute("init_x"))
          // const initY = parseInt(target.getAttribute("init_y"))

          const initX = parseInt(target.offsetLeft)
          const initY = parseInt(target.offsetTop)
          // 鼠标按下，计算当前元素距离可视区的距离
          const disX = e.clientX - target.offsetLeft
          const disY = e.clientY - target.offsetTop
          document.onmousemove = (e) => {
            // 通过事件委托，计算移动的距离
            // 因为浏览器里并不能直接取到并且使用clientX、clientY,所以使用事件委托在内部做完赋值
            const l = e.clientX - disX
            const t = e.clientY - disY
            // 计算移动当前元素的位置，并且给该元素样式中的left和top值赋值
            target.style.left = l + "px"
            // target.style.top = (t < minTop ? minTop : t) + "px"
            target.style.top = t + "px"
            // 拖拽改变回调函数
            dragCallBack(target, binding, l, t, initOffsetLeft, initoffsetTop)
            if (
              Math.abs(l - initX) > ifMoveSizeArea ||
              Math.abs(t - initY) > ifMoveSizeArea
            ) {
              target.setAttribute("dragged", "")
            } else {
              target.removeAttribute("dragged")
            }
          }
          document.onmouseup = (e) => {
            document.onmousemove = null
            document.onmouseup = null
            document.onselectstart = null
          }
          // return false不加的话可能导致黏连，拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
          return false
      }
    },
  })
}
// 拖拽改变回调
const dragCallBack = (el, binding, x, y, initOffsetLeft, initoffsetTop) => {
  const dragHandle = binding.value || null
  if (dragHandle instanceof Function) {
    dragHandle({
      el,
      x,
      y,
      initOffsetLeft,
      initoffsetTop,
      setOffset: (x, y) => {
        setOffset(el, binding, x, y, initOffsetLeft, initoffsetTop)
      },
      binding,
    })
  }
}
// 设置偏移量
const setOffset = (target, binding, x, y, initOffsetLeft, initoffsetTop) => {
  // 计算移动当前元素的位置，并且给该元素样式中的left和top值赋值
  target.style.left = x + "px"
  target.style.top = y + "px"
  dragCallBack(target, binding, x, y, initOffsetLeft, initoffsetTop)
}
const initOffset = (target, binding, x, y, initOffsetLeft, initoffsetTop) => {
  /* const initX = (target.offsetLeft || 0) * 1 + x * 1
  const initY = (target.offsetTop || 0) * 1 + y * 1 */
  let initX
  let initY
  if (typeof x == 'string' && typeof y == 'string') {
    initX = x
    initY = y
  } else {
    initX = (target.offsetLeft || 0) * 1 + x * 1
    initY = (target.offsetTop || 0) * 1 + y * 1
  }
  setOffset(target, binding, initX, initY, initOffsetLeft, initoffsetTop)
}

